<!-- 页面C模板 - 应用程序的第三级页面 -->
<template>
	<!-- 主容器：页面整体布局容器 -->
	<view class="content">
		<!-- 页面头部：显示页面标题 -->
		<view class="header">
			<text class="title">页面C</text>
		</view>
		
		<!-- 按钮操作区域：包含多种导航选项 -->
		<view class="button-area">
			<!-- 返回导航按钮：回到上一个页面 -->
			<button class="btn btn-back" @click="goBack">返回上一页</button>
			<!-- 首页导航按钮：直接返回到应用首页 -->
			<button class="btn btn-home" @click="goToHome">返回首页</button>
			<!-- 功能按钮：查看当前页面源码 -->
			<button class="btn view-source-btn" @click="viewSource">查看源码</button>
		</view>
	</view>
</template>

<script>
	/**
	 * 页面C组件
	 * 功能：作为应用程序的深层页面，提供多种导航选项和用户体验
	 * 特点：提供灵活的导航方式，包括逐级返回和直接返回首页
	 */
	export default {
		/**
		 * 组件数据
		 * @returns {Object} 返回组件的响应式数据
		 */
		data() {
			return {
				// 当前页面暂无需要管理的数据状态
			}
		},
		
		/**
		 * 页面加载完成时触发
		 * 可在此处进行页面初始化操作，如数据加载、用户行为统计等
		 */
		onLoad() {
			// 页面加载时的初始化逻辑（当前为空）
		},
		
		methods: {
			/**
			 * 返回上一页
			 * 使用uni.navigateBack返回到页面栈中的上一个页面
			 * 适用于用户想要逐步返回的场景
			 */
			goBack() {
				uni.navigateBack({
					delta: 1  // 返回上一级页面
				})
			},
			
			/**
			 * 直接返回首页
			 * 使用uni.reLaunch重新启动应用并跳转到首页
			 * 会清空页面栈，适用于用户想要快速回到主界面的场景
			 */
			goToHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			
			/**
			 * 查看当前页面源码
			 * 跳转到源码查看页面，并传递当前页面标识参数
			 * 为开发者和学习者提供代码参考功能
			 */
			viewSource() {
				uni.navigateTo({
					url: '/pages/sourceView/sourceView?page=页面C'
				})
			}
		}
	}
</script>

<style>
	/* 主容器样式 - 页面整体布局设计 */
	.content {
		display: flex;              /* 使用弹性布局 */
		flex-direction: column;     /* 垂直方向排列子元素 */
		align-items: center;        /* 水平居中对齐 */
		justify-content: center;    /* 垂直居中对齐 */
		padding: 40rpx;             /* 内边距，提供页面边距 */
		min-height: 100vh;          /* 最小高度为视窗高度，确保全屏显示 */
	}

	/* 页面头部样式 - 标题区域布局 */
	.header {
		margin-bottom: 80rpx;       /* 底部外边距，与按钮区域保持间距 */
	}

	/* 页面标题样式 - 主标题文本效果 */
	.title {
		font-size: 48rpx;           /* 较大的字体尺寸，突出页面标题 */
		color: #333;                /* 深灰色文字，提供良好的可读性 */
		font-weight: bold;          /* 粗体字重，增强视觉层次 */
	}

	/* 按钮区域样式 - 操作按钮容器布局 */
	.button-area {
		display: flex;              /* 弹性布局 */
		flex-direction: column;     /* 垂直排列按钮 */
		gap: 40rpx;                 /* 按钮之间的间距，提供清晰的视觉分离 */
	}

	/* 通用按钮样式 - 基础按钮外观设计 */
	.btn {
		width: 400rpx;              /* 统一的按钮宽度 */
		height: 80rpx;              /* 统一的按钮高度 */
		color: white;               /* 白色文字，与背景形成对比 */
		border: none;               /* 无边框，现代化设计 */
		border-radius: 10rpx;       /* 圆角边框，柔和的视觉效果 */
		font-size: 32rpx;           /* 适中的字体大小，确保可读性 */
	}

	/* 返回按钮样式 - 逐级返回导航按钮 */
	.btn-back {
		background-color: #6c757d;  /* 灰色背景，表示返回/取消类操作 */
	}

	/* 首页按钮样式 - 快速返回主页按钮 */
	.btn-home {
		background-color: #007aff;  /* 蓝色背景，表示主要导航操作 */
	}
	
	/* 查看源码按钮样式 - 功能类按钮的特殊样式 */
	.view-source-btn {
		background-color: #34c759;  /* 绿色背景，表示查看/信息类操作 */
	}

	/* 按钮激活状态样式 - 用户交互反馈 */
	.btn:active {
		opacity: 0.7;               /* 按下时降低透明度，提供触觉反馈 */
	}
</style>